<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 整体的卡片(大盒子) -->
      <el-card shadow="never">
        <!-- 表单 -->
        <el-form label-width="80px" :model="keyForm">
          <!-- row 布局 -->
          <el-row :gutter="20">
            <!-- 左侧搜索栏 -->
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input placeholder="根据文章标题搜索" v-model="keyForm.keyword">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 中间状态栏 -->
            <el-col :span="6">
              <el-form-item label="状态" prop="state">
                <el-select  v-model="keyForm.state" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 清除/搜索按钮 -->
            <el-col :span="4">
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-col>
            <!-- 新增按钮 -->
            <el-col :span="3" :offset="5">
              <el-button type="success" @click="addArticle">
                <i class="el-icon-edit"></i>
                <span>新增技巧</span>
              </el-button>
            </el-col>
          </el-row>
          <!-- 提示数据条数 -->
          <el-alert
            show-icon
            :title="`数据一共 ${ counts } 条`"
            :closable="false"
            class="alert-num"
          ></el-alert>
        </el-form>
        <!-- 表格 -->
        <articlesTable
          :articlesList="articlesList"
          :pageQuery="pageQuery"
          @update="getArticleList"
          @getArticleList="getArticleList"
          @updatePage="updatePage"
        >
        </articlesTable>
        <!-- 分页 -->
        <div>
          <pageTool
            :paginationPage="pageQuery.page"
            :paginationPagesize="pageQuery.pagesize"
            :total="counts"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
            class="page-tool"
          ></pageTool>
        </div>
      </el-card>
    </div>
    <!-- 添加框 -->
    <articles-add
      :isArticles.sync="isArticles"
      :curId="curId"
      :formData="formData"
      @getArticleList="getArticleList"
    ></articles-add>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/articles'
import pageTool from '@/module-manage/components/page-tool'
import articlesTable from './companys/articles-table'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  components: {
    // changeArticle,
    articlesTable,
    pageTool,
    ArticlesAdd
  },
  data () {
    return {
      formData: {},
      curId: 0,
      isArticles: false,
      keyForm: { // 表单数据
        keyword: '',
        state: ''
      },
      pageQuery: {
        page: 1, // 第几页
        pagesize: 10 // 一页多少数据
      },
      counts: '', // 总数
      options: [{ // 下拉框数据
        value: 0,
        label: '启用'
      }, {
        value: 1,
        label: '禁用'
      }],
      stateValue: '', // 状态值
      articlesList: [{
        articleBody: '', // 文章主体
        createTime: '', // 创建时间
        creatorID: '', // 创建id
        id: '',
        state: '', // 状态
        title: '', // 标题
        username: '', // 用户名
        videoURL: '', // 视频地址
        visits: '' // 阅读数
      }]
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    // 最后一条修改页数
    updatePage () {
      this.pageQuery.page--
      this.getArticleList()
    },
    // 新增文章
    addArticle () {
      this.isArticles = true
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      console.log(val)
      this.pageQuery.page = 1
      this.pageQuery.pagesize = val
      this.getArticleList()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pageQuery.page = val
      this.getArticleList()
    },
    // 搜索
    search () {
      // 搜索内容不能为空
      if (this.keyForm.keyword === '' && this.keyForm.state === '') {
        this.getArticleList()
      } else {
        this.pageQuery = { ...this.keyForm }
        console.log(this.pageQuery)
        this.getArticleList()
        this.clear()
        console.log(this.pageQuery)
      }
    },
    // 传入数据获取文章数据
    async getList (data) {
      const res = await list(data)
      this.articlesList = res.data.items
      this.pageQuery.pagesize = res.data.pagesize
      this.pageQuery.page = res.data.page
    },
    // 清除关键字/状态
    clear () {
      this.pageQuery = {
        page: 1, // 第几页
        pagesize: 10 // 一页多少数据
      }
      this.keyForm.keyword = ''
      this.keyForm.state = ''
    },
    // 获取文章数据
    async getArticleList () {
      const res = await list(this.pageQuery)
      console.log(res)
      this.articlesList = res.data.items
      this.pageQuery.pagesize = res.data.pagesize
      this.pageQuery.page = res.data.page
      this.counts = res.data.counts
      // 修改时间格式
      this.articlesList.map(item => {
        // console.log(item.createTime)
        if (item.createTime) {
          // 创建一个日期对象
          const dateObj = new Date(item.createTime)

          // 获取年、月、日、小时、分钟、秒
          const year = dateObj.getFullYear()
          const month = ('0' + (dateObj.getMonth() + 1)).slice(-2)
          const day = ('0' + dateObj.getDate()).slice(-2)
          const hours = ('0' + dateObj.getHours()).slice(-2)
          const minutes = ('0' + dateObj.getMinutes()).slice(-2)
          const seconds = ('0' + dateObj.getSeconds()).slice(-2)

          // 拼接成目标格式的字符串

          item.createTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
        }
      })
    }
  }
}
</script>

<style scoped>
.alert-num{
  margin-bottom: 15px;
}
.page-tool{
  margin-top: 20px;
}
</style>
